<template>
<view class="way">
	<cu-custom bgColor="bg-gradual-blue" :isBack="true">
		<block slot="backText">返回</block>
		<block slot="content">{{title}}提现</block>
	</cu-custom>	
	<my-head></my-head>
	<key-pass v-model="keyShow" :pass="cash" :vcode="vcode" :BindPhone="phone" @on-clear="toClear" @submit="toCashSMS" @key="optKey" @del="optDel" :verify="verify"></key-pass>
	<alert-rich :source="info.remark" :show="showAgre" @on-close="showAgre = false"></alert-rich>
	<view class="detail">
		<view>
			<text>总余额</text>
			<input type="text" :value="info.balance" disabled/>
		</view>
		<view>
			<text>可提现金额</text>
			<input type="text" :value="info.allow_cash" disabled/>
		</view>
		<view>
			<text>提现金额</text>
			<input type="text" v-model.number="cash.to_cash" placeholder="请输入提现金额"/>
		</view>
		<view>
			<text>到账金额</text>
			<input type="text" :value="toCash" disabled />
		</view>
		 <view class="rule">
			 <checkbox-group @change="agree = !agree">
				<label><checkbox :class="['red', {checked: agree}]" :checked="agree"></checkbox>我已经阅读并同意</label>
				<text @tap="showAgre = true">《提现协议》</text>
			 </checkbox-group>
		 </view>		
	</view>
	<view class="btn" @tap="Iagree"><button type="warn">确认</button></view>
</view>
</template>

<script>
	import MyHead from '@/components/head'
	import AlertRich from '@/components/richtext'
	import KeyPass from '@/components/keypass'
	import { cash, cashMoney } from '@/common/api/users'
	import { mapGetters } from 'vuex'
	import { sendPhoneMsg } from '@/common/api'
	export default {
		name: 'cashWay',
		data () {
			return {
				info: {},
				verify: '',
				vcode: '',
				title: '',
				phone: '',
				agree: false,
				showAgre: false,
				keyShow: false,
				params: {
					user_id: '',
					customer_id: '',
					type: ''
				},
				cash: {
					to_cash: '',
					pw: '',
					formId: ''
				}
			}
		},
		computed: {
			...mapGetters([
				'userInfo',
				'shop'				
			]),
			toCash () {
				return (this.cash.to_cash * ((100 - this.info.callback_fee) / 100)).toFixed(2)
			}			
		},
		watch: {
			'cash.to_cash' (val, oldval) {
				if (val > this.info.allow_cash) {
					this.cash.to_cash = 0
				} 
			},
			vcode (val, oldval) {
				if (val.length === 6) {
					if (val === this.verify) {
						this.confirmCash()
					} else {
						uni.showModal({
							content: '验证码错误',
							showCancel: false
						})
						this.vcode = ''
					}					
				}
			}
		},
		components: { MyHead, AlertRich, KeyPass },
		onLoad(opt) {
			let title = ''
			switch(+opt.type) {
				case 2:
				title = '支付宝'
				break;
				case 4:
				title = '银行卡'
			}
			this.phone = opt.phone
			this.params.type = opt.type
			this.title = title
			this.getInfo()
		},
		methods: {
			optKey (e) {
				this.verify ? this.vcode += e : this.cash.pw += e
			},
			optDel () {
				this.verify ? this.vcode = this.vcode.substr(0, this.vcode.length - 1) : this.cash.pw = this.cash.pw.substr(0, this.cash.pw.length - 1) 
			},
			toClear () {
				this.cash.pw = ''
				this.vcode = ''
				this.verify = ''
			},
			getInfo () {
				this.params.user_id = this.userInfo.id
				this.params.customer_id = this.shop.customer_id
				uni.showLoading()
				cash(this.params).then(res => {
					uni.hideLoading()
					if (!res.code) {
						this.info = res.data
					}
				})
			},
			Iagree () {
				if (this.agree) {
					if (!this.cash.to_cash) {
						uni.showModal({
							content: '请输入提现金额',
							showCancel: false
						})
					} else {
						uni.hideKeyboard()
						this.keyShow = true
					}
				} else {
					uni.showModal({
						content: '请先阅读提现协议',
						showCancel: false
					})
				}
			},
			async toCashSMS () {
				uni.showLoading()
				this.shop.is_draw_sms ?	await this.sendSMS() : await this.confirmCash()
				uni.hideLoading()
			},
			sendSMS () {
				return new Promise(resolve => {
					sendPhoneMsg({ phone: this.phone, action: 1 }).then(res => {
						if(!res.code) {
							uni.showToast({
								title: '验证码发送成功',
								duration: 3000,
								success: () => {
									this.verify = res.mcode
								}
							})							
						} else {
							uni.showModal({
								content: res.msg,
								showCancel: false
							})
						}
						resolve()						
					})
				})
			},
			confirmCash () {
				return new Promise(resolve => {
					cashMoney(Object.assign({}, this.params, this.cash)).then(res => {
						if (!res.code) {
							this.info.balance = (parseFloat(this.info.balance) - this.cash.to_cash).toFixed(2)
							this.info.allow_cash = this.info.allow_cash - this.cash.to_cash
							uni.showModal({
								content: res.data,
								showCancel: false,
								success: rst => {
									if (rst.confirm) {
										this.cash.to_cash = this.cash.pw = ''
										if (this.shop.is_draw_sms) {
											this.vcode = ''
											this.verify = ''
										}
										this.keyShow = false
									}
								}
							})
						} else {
							uni.showModal({
								content: res.msg,
								showCancel: false,
								success: rst => {
									if (rst) {
										this.keyShow = false
										this.cash.pw = ''
										if (this.shop.is_draw_sms) {
											this.vcode = ''
											this.verify = ''
										}
									}
								}
							})
						}
						resolve()
					})					
				})
			}						
		}
	}
</script>

<style lang="less" scoped>
@import '../common/styles/variables.less';	
.way {
	overflow: hidden;
.detail {
	background-color:white;
	overflow: hidden;
	& > view {
		display: flex;
		height: @height;
		justify-content: space-between;
		align-items: center;
		padding: 0 15upx;
		font-size: 14px;
		&:not(:last-of-type) {
			.border-bottom(15upx);
		}
		&.area { 
			height: 120upx;
			align-items: flex-start;
			padding: 15upx;
		}
		& > text {
			&.red { font-weight: 600;color:@red }
			&:nth-of-type(1) {
				width: 136upx;
				text-align: justify;
				text-align-last: justify;
				margin-right: 20upx;
			}
			&:nth-of-type(2) {
				text-align: right;
				flex: 1;
			}
		}
		& > input {
			flex: 1;
			opacity: 1;
			text-align: right;
			font-weight: 600;
			color:@red;
		}
	}
	.rule {
		font-size: 26upx;
		background-color: white;
		checkbox-group {
			height: @height;
			display: flex;
			align-items: center;
			label {
				display: flex;
				align-items: center;
				checkbox {
					margin-right: 10upx;
				}				
			}
		}
		text {
			color:#1e90ff;
		}
	}
}	
	.btn {
		margin: 60upx 15px;
	}	
}
</style>
